component.tables-pricing

table-pricing-1

Choose your plan Free $0.00
Bronze $9.99
Silver $19.99
Gold $49.99
Setup & Installation
HTML Templates
SMS Templates
API Included
Tracking System Basic Tracking
<!-- Pricing table -->
<table class="table table-white table-vertical-center table-pricing">

	<!-- Table heading -->
	<thead>
		<tr>
			<th class="center heading">Choose your plan</th>
			<th class="center" style="width: 15%">
				<span class="plan">Free</span>
				<span class="price">&dollar;0.00</span>
				<div class="separator bottom"></div>
				<button class="btn btn-primary btn-block">Sign up</button>
			</th>
			<th class="center" style="width: 15%">
				<span class="plan">Bronze</span>
				<span class="price">&dollar;9.99</span>
				<div class="separator bottom"></div>
				<button class="btn btn-primary btn-block">Sign up</button>
			</th>
			<th class="center" style="width: 15%">
				<span class="plan">Silver</span>
				<span class="price">&dollar;19.99</span>
				<div class="separator bottom"></div>
				<button class="btn btn-primary btn-block">Sign up</button>
			</th>
			<th class="center" style="width: 15%">
				<span class="plan">Gold</span>
				<span class="price">&dollar;49.99</span>
				<div class="separator bottom"></div>
				<button class="btn btn-primary btn-block">Sign up</button>
			</th>
		</tr>
	</thead>
	<!-- // Table heading END -->
	
	<!-- Table body -->
	<tbody>
	
		<!-- Table row -->
		<tr>
			<td>Setup &amp; Installation</td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
		</tr>
		<!-- // Table row END -->
		
		<!-- Table row -->
		<tr>
			<td>HTML Templates</td>
			<td class="center"><span class="glyphicons standard remove_2"><i></i></span></td>
			<td class="center"><span class="glyphicons standard remove_2"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
		</tr>
		<!-- // Table row END -->
		
		<!-- Table row -->
		<tr>
			<td>SMS Templates</td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
		</tr>
		<!-- // Table row END -->
		
		<!-- Table row -->
		<tr>
			<td>API Included</td>
			<td class="center"><span class="glyphicons standard remove_2"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
		</tr>
		<!-- // Table row END -->
		
		<!-- Table row -->
		<tr>
			<td>Tracking System</td>
			<td class="center">Basic Tracking</td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
			<td class="center"><span class="glyphicons standard circle_ok"><i></i></span></td>
		</tr>
		<!-- // Table row END -->
		
	</tbody>
	<!-- // Table body END -->
	
</table>
<!-- // Pricing table END -->

Code

@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

table-pricing-2

Free Plan Bronze Plan Silver Plan Gold Plan
$0.00 per month $9.99 per month $19.99 per month $49.99 per month
Setup & Installation
HTML Templates
SMS Templates
API Included
Tracking system
Setup & Installation
HTML Templates
SMS Templates
API Included
Tracking system
Setup & Installation
HTML Templates
SMS Templates
API Included
Tracking system
Setup & Installation
HTML Templates
SMS Templates
API Included
Tracking system
<!-- Pricing table -->
<table class="table table-vertical-center table-pricing table-pricing-2">

	<!-- Table heading -->
	<thead>
		<tr>
			<th class="center">Free Plan</th>
			<th class="center">Bronze Plan</th>
			<th class="center">Silver Plan</th>
			<th class="center">Gold Plan</th>
		</tr>
	</thead>
	<!-- // Table heading END -->
	
	<!-- Table body -->
	<tbody>
	
		<!-- Table pricing row -->
		<tr class="pricing">
			<td class="center">
				<span class="price">&dollar;0.00</span>
				<span>per month</span>
			</td>
			<td class="center">
				<span class="price">&dollar;9.99</span>
				<span>per month</span>
			</td>
			<td class="center">
				<span class="price">&dollar;19.99</span>
				<span>per month</span>
			</td>
			<td class="center">
				<span class="price">&dollar;49.99</span>
				<span>per month</span>
			</td>
		</tr>
		<!-- // Table pricing row END -->
		
		<!-- Table row -->
		<tr>
			<td class="center">
				Setup &amp; Installation<br/>
				HTML Templates<br/>
				SMS Templates<br/>
				API Included<br/>
				Tracking system
				<div class="separator bottom"></div>
				<button class="btn btn-primary">Sign up</button>
			</td>
			<td class="center">
				Setup &amp; Installation<br/>
				HTML Templates<br/>
				SMS Templates<br/>
				API Included<br/>
				Tracking system
				<div class="separator bottom"></div>
				<button class="btn btn-primary">Sign up</button>
			</td>
			<td class="center">
				Setup &amp; Installation<br/>
				HTML Templates<br/>
				SMS Templates<br/>
				API Included<br/>
				Tracking system
				<div class="separator bottom"></div>
				<button class="btn btn-primary">Sign up</button>
			</td>
			<td class="center">
				Setup &amp; Installation<br/>
				HTML Templates<br/>
				SMS Templates<br/>
				API Included<br/>
				Tracking system
				<div class="separator bottom"></div>
				<button class="btn btn-primary">Sign up</button>
			</td>
		</tr>
		<!-- // Table row END -->
		
	</tbody>
	<!-- // Table body END -->
	
</table>
<!-- // Pricing table END -->

Code

@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

table-pricing-3

  • Starter

    Free
    • Basic Support
    • Unlimited Email Alerts
    • Free Weekly Digests
    • 5 Email Templates
    • Customizable Profile Page
    • 2 months listing
  • Silver

    €19.99 per month
    • Dedicated Support
    • Unlimited Email Alerts
    • Free Weekly Digests
    • 20 Email Templates
    • Customizable Profile Page
    • 6 months listing
  • Gold

    €49 per month
    • Premium Support
    • Unlimited Email Alerts
    • Free Weekly Digests
    • 50 Email Templates
    • Customizable Profile Page
    • Lifetime listing
<div class="table-pricing-3">
	<ul class="list-unstyled row">
		<li class="col-md-4">
			<div class="innerAll">
				<h3>Starter</h3>
				<div class="body">
					<div class="price">
						Free
					</div>
				</div>
				<div class="features">
					<ul>
						<li>Basic Support</li>
						<li>Unlimited Email Alerts</li>
						<li>Free Weekly Digests</li>
						<li><strong>5 Email</strong> Templates</li>
						<li>Customizable Profile Page</li>
						<li><strong>2 months</strong> listing</li>
					</ul>
				</div>
				<div class="footer">
					<a href="#" class="btn btn-success">Get Started</a>
				</div>
			</div>
		</li>
		<li class="col-md-4 active">
			<div class="innerAll">
				<h3>Silver</h3>
				<div class="body">
					<div class="price">
						<span class="figure">&euro;19.99</span>
						<span class="term">per month</span>
					</div>
				</div>
				<div class="features">
					<ul>
						<li>Dedicated Support</li>
						<li>Unlimited Email Alerts</li>
						<li>Free Weekly Digests</li>
						<li><strong>20 Email</strong> Templates</li>
						<li>Customizable Profile Page</li>
						<li><strong>6 months</strong> listing</li>
					</ul>
				</div>
				<div class="footer">
					<a href="#" class="btn btn-success">Get Started</a>
				</div>
			</div>
		</li>
		<li class="col-md-4">
			<div class="innerAll">
				<h3>Gold</h3>
				<div class="body">
					<div class="price">
						<span class="figure">&euro;49</span>
						<span class="term">per month</span>
					</div>
				</div>
				<div class="features">
					<ul>
						<li>Premium Support</li>
						<li>Unlimited Email Alerts</li>
						<li>Free Weekly Digests</li>
						<li><strong>50 Email</strong> Templates</li>
						<li>Customizable Profile Page</li>
						<li><strong>Lifetime</strong> listing</li>
					</ul>
				</div>
				<div class="footer">
					<a href="#" class="btn btn-success">Get Started</a>
				</div>
			</div>
		</li>
		<div class="clearfix"></div>
	</ul>
</div>

Code

@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/tables/pricing/assets/less/tables-pricing.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.